<template>
	<vue-simplebar>
		<div class="max-w-screen-lg mx-auto">
			<div class="page-container">
				<div class="page-filter-option">
					<el-form :inline="true" :model="filterOption" class="flex flex-wrap">
						
						<el-form-item>
							<component-page-org-tree-option v-model="filterOption.plat_code" @change="getDataList"></component-page-org-tree-option>
						</el-form-item>
						
						<el-form-item>
							<component-page-game-option v-model="filterOption.game_id" @change="getDataList"></component-page-game-option>
						</el-form-item>
						<el-form-item>
							<el-button @click="getDataList">{{ $t('action.search') }}</el-button>
						</el-form-item>
					</el-form>
				</div>
				<div class="page-container-inner mt-3" v-loading="loading">
					<h4 class="text-lg p-1 pb-0">{{ $t('system.tools.slot-game.game_rtp') }}</h4>
					<div class="h-80">
						<component-page-echarts ref="chartGameRtp"></component-page-echarts>
					</div>
				</div>
				
				<div class="page-container-inner mt-3" v-loading="loading">
					<h4 class="text-lg p-1 pb-0">{{ $t('system.tools.slot-game.type') }}</h4>
					<div class="h-80">
						<component-page-echarts ref="chartType"></component-page-echarts>
					</div>
				</div>
				
				
				<div class="page-container-inner mt-3" v-loading="loading">
					<h4 class="text-lg p-1 pb-0">{{ $t('system.tools.slot-game.gain') }}</h4>
					<div class="h-80">
						<component-page-echarts ref="chartPeriodRtpGain"></component-page-echarts>
					</div>
				</div>
				<div class="page-container-inner mt-3" v-loading="loading">
					<h4 class="text-lg p-1 pb-0">{{ $t('system.tools.slot-game.cost') }}</h4>
					<div class="h-80">
						<component-page-echarts ref="chartProtectCost"></component-page-echarts>
					</div>
				</div>
			</div>
		</div>
	</vue-simplebar>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			filterOption: {
				plat_code: '',
				keyword: '',
				keyword_column: 'account_id',
				page: 1,
				page_size: 100,
				game_id:'',
				order: 'desc',
				order_key: 'descending',
				order_column: 'start_time',
			},
			data: {},
		}
	},
	created() {
		this.getDataList();
	},
	methods: {
		getDataList() {
			this.loading = true;
			axios.get('/system/tools/slot/getFire', {
				params: this.filterOption
			}).then((response) => {
				if (response.data.resp_msg.code == 200) {
					this.data = response.data.resp_data;
					// 游戏rtp
					this.initChart(_.map(this.data, 'game_rtp'), 'chartGameRtp');
					// 周期类型
					this.initChart(_.map(this.data, 'type'), 'chartType');
					// 游戏周期rtp修正系数
					this.initChart(_.map(this.data, 'gain'), 'chartPeriodRtpGain');
					// 玩家保底修正系数
					this.initChart(_.map(this.data, 'cost'), 'chartProtectCost');
				} else {
					this.$message({
						type: 'error',
						message: response.data.resp_msg.message,
						showClose: true
					});
				}
				this.loading = false;
			})
		},
		initChart(data, chart) {
			let types = {
				1: 0,   //正常周期
				2: 1,  //出分周期
				3: -1,   //吃分周期
			};
			let option = {
				color: ["#d48265"],
				tooltip: {
					trigger: 'axis',
				},
				grid: {
					top: 40,
					right: 40,
					bottom: 40,
					left: 80,
				},
				xAxis: {
					show: true,
					boundaryGap: false,
					data: data.map((item,index) => {
						return index
					})
				},
				yAxis: {
					show: true,
					axisLine: {show: false},
					axisTick: {show: false},
				},
				series: [{
					type: 'line',
					data: data.map((item) => {
						if (chart === 'chartType') {
							return types[item];
						} else {
							return this.$store.getters['config/filterNumeral'](item);
						}
					})
				}]
			};
			// 渲染图表
			this.$refs[chart].setOption(option);
		},
	}
}
</script>

<style lang="scss" scoped>

</style>
